<template>
    <a-modal :visible="visible" :footer="null"
             :width="500"
             :destroyOnClose="true"
             @cancel="handleCancel">
        <div>
            <div style="display: flex;align-items: center">
                <div style="width: 5px;height: 20px;background-color: #1890FF"/>
                <div style="font-size: 20px;font-weight: bold;">选择映射配置</div>
            </div>
            <a-form :form="form">
                <a-form-item label="类型映射配置">
                    <a-select
                            v-decorator="['typeMapperGroupId',{ rules: [{ required: true, message: '请选择!' }] },]">
                        <a-select-option v-for="item in typeMapperGroupList" :key="item.id"  :value="item.id">
                           {{item.name}}
                        </a-select-option>

                    </a-select>
                </a-form-item>

                <div style="display: flex;justify-content: center">
                    <a-button :angle="0" @click="cancle">取消</a-button>
                    <a-button style="margin-left: 20px" type="primary" :angle="0" @click="submit">确认</a-button>
                </div>

            </a-form>
        </div>
    </a-modal>
</template>

<script>
export default {
  name: "SelectTypeMapperModal",
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this, { name: 'type_mapper_config' }),
      typeMapperGroupList: [],
      record: null
    }
  },
  methods: {
    handleCancel() {
      this.record = null
      this.visible = false
    },
    cancle() {
      this.record = null
      this.visible = false
    },
    submit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          Object.assign(this.record, values)
          Object.assign(this.record, { type: '1' })
          this.Atm.postAction('codeGenerator/generatorColumnConfigGroup/buildColumnConfigBySource', this.record, 1)
            .then(res => {
              if (res.code == 200) {
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
              this.visible = false
            })
        }
      })
    }
  },
  mounted() {
  },
  watch: {
    'visible': function (val) {
      if (val) {
        //加载类型映射列
        this.Atm.getAction('codeGenerator/generatorTypeMapperGroup/list')
          .then(res => {
            if (res.code == 0) {
              this.typeMapperGroupList = res.result.records
            } else {
              this.$message.info(res.message)
            }
          })
      }
    }
  }
}
</script>

<style scoped>

</style>
